<template>
	<!-- v-if='dataList.length!==0' -->
	<view>
		<view class='header'>
			<view>{{option.defName}}</view>
		</view>
		<view class='container'>
			<view v-for='(item,index) in header ' :key='index'>
				<view v-if='item.children && option.sId==="cwjsTable"'>
					<view style='line-height: 60px;text-align: center;'>具体资产明细</view>
					<u-table>
						<u-tr>
							<u-th>拟调整账目(资产类别)</u-th>
							<u-th>决算数</u-th>
							<u-th>备注</u-th>
						</u-tr>
						<u-tr v-for='(item,index) in data' :key='index'>
							<u-td>{{item.assetName}}</u-td>
							<u-td>{{item.assetCount}}</u-td>
							<u-td>{{item.remark}}</u-td>
						</u-tr>
					</u-table>
				</view>
				<view v-else-if='item.children && option.sId==="zjlyTable"'>
					<view style='line-height: 60px;text-align: center;'>项目投资估算分析</view>
					<u-table>
						<u-tr>
							<u-th>序号</u-th>
							<u-th>费用项目</u-th>
							<u-th>长度或面积</u-th>
							<u-th>指标</u-th>
							<u-th>估算费用（万元）</u-th>
						</u-tr>
						<u-tr v-for='(item,index) in data' :key='index'>
							<u-td>{{item.code}}</u-td>
							<u-td>{{item.costItem}}</u-td>
							<u-td>{{item.lengthOrArea}}</u-td>
							<u-td>{{item.quota}}</u-td>
							<u-td>{{item.applyCost}}</u-td>
						</u-tr>
						
					</u-table>
				</view>
				<view v-else class='listWrap'>
					<view class='leftClass'>
						{{item.text}}
					</view>
					<view class='middleClass'></view>
					<view class='rightClass'>
						<view v-if='item.children'>
							<view v-for='(a,index) in item.children' :key='index'>
								{{a.dataSoure}}
							</view>
						</view>
						<view v-else>
							{{item.dataSoure}}
						</view>
					</view>
				</view>
			</view>


		</view>




	</view>
</template>

<script>
	import {
		getCommonData
	} from '@/api/table/index.js'
	export default {
		props: {
			option: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				header: [],
				dataList: {},
				data: []
			}
		},
		methods: {
			// 获取表头
			getHeader() {
				let params = {
					tableId: this.option.tableId
				}
				getCommonData('/adminAnalysis/query/header', params).then(res => {
					if (res.success) {
						this.header = res.data
					} else {
						this.header = []
					}
					this.getCommonData()
				})

			},
			// 递归
			changeHeader(header) {
				header.map(o => {
					if (o.children) {
						this.changeHeader(o.children)
					} else {
						for (var key in this.dataList) {
							if (key === o.field) {
								o.dataSoure = this.dataList[key]
							}
						}
					}
				})
			},
			getCommonData() {
				let params = {
					formGuid: this.option.bizKey
				}
				getCommonData(`${this.option.responseUrl}/findByFormGuid`, params).then(res => {
					// 成功就去匹配
					if (res.success) {
						if (this.option.sId === 'cwjsTable' || this.option.sId === 'zjlyTable') {
							this.dataList = res.data[0]
							this.data = res.data
						} else {
							this.dataList = res.data
						}

						this.changeHeader(this.header)
					} else {

					}
					setTimeout(() => {
						console.log(this.header)
						this.$forceUpdate();
					}, 500)


				})
			}
		},
		created() {
			// 公共获取数据
			this.getHeader()

		}
	}
</script>

<style scoped lang='scss'>
	.container /deep/ .u-td {
		height: 100%;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		flex-direction: column;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		font-size: 14px;
		color: #606266;
		-webkit-align-self: stretch;
		align-self: stretch;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		height: 80px !important;
	}


	.header {
		text-align: center;
		text-align: center;
		font-size: 16px;
		margin-top: 5px;
	}

	.dateTitle {
		margin-top: 8px;
		font-size: 13px;
		color: gray;
	}

	.container {
		margin-top: 5px;
		padding: 5px 10px;
		background: #fff;
		margin: 8px 0px;

		.listWrap {
			display: flex;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 1px solid #e0d9d9;
			padding: 10px 0px;
			align-items: center;

			.leftClass {
				flex: 1;
				text-align: left;
			}

			.middleClass {
				flex: 1.1;
			}

			.rightClass {
				font-size: 14px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				flex: 2;
				text-align: right;
				padding-right: 5px;
				line-height: 25px;
			}
		}
	}
</style>
